<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=0.5"/>
    <title>流程添加</title>
    <script src="/static/bflow/assets/js/scriptLib.js"></script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1><label id="pageTitle">流程定义详情</label>
            <small><a href="/static/bflow/ui/define/processList.html" class="btn btn-outline btn-default"><i class="glyphicon glyphicon-chevron-left"></i>返回列表</a></small>
        </h1>
    </div>
    <table id="viewTable" class="table table-bordered">
        <tbody>
            <tr><th>流程ID:</th><td id="id"></td></tr>
            <tr><th>流程KEY:</th><td id="key"></td></tr>
            <tr><th>流程名称:</th><td id="name"></td></tr>
            <tr><th>活动集合:</th><td id="actSet"></td></tr>
            <tr><th>流程描述:</th><td id="desc"></td></tr>
            <tr><th>版本号:</th><td id="version"></td></tr>
            <tr><th>状态:</th><td id="status"></td></tr>
            <tr><th>创建时间:</th><td id="createTime"></td></tr>
            <tr><th>修改时间:</th><td id="updateTime"></td></tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    $(function () {
        initViewData();
    });

    // 初始化表单数据
    function initViewData(){
        var id = getBrowserQueryVar("id");
        if(CommUtil.isNotEmpty(id)){
            HttpUtil.ajaxAsyncJsonPost("/bflow/defineProcess/get", {id: id}, function(data){
                console.log("data", data);
                var bo = data.bo;
                FormUtil.bindViewData("viewTable", bo);
                $("#status").html(getCommStatusLabel(bo.status));
                //构建 路由视图
                buildRouteView(bo.actSet, bo.actNameSet, data.routesGroup);
            });
        }
    }

    //构建 路由视图
    function buildRouteView(actSet, actNameSet, routesGroup){
//        log(routes);
        $("#actSet").html('');
        var arr = actSet.split(",");
        var names = actNameSet.split("###");
        var groupId, actId;
        for(var i=0; i<arr.length; i++){
            actId = arr[i];
            groupId = arr[i]+"_"+i;
            $("#actSet").append('<h4 style="color: #'+getGroupColor(actId)+'">'+names[i]+'</h4>');
            $("#actSet").append(buildRouteItem(actId, i, routesGroup[''+groupId+'']));
        }
    }

    function buildRouteItem(actId, actSort, items){
//        log(items);
        var item = null;
        var sb = new StringBuffer();
        for(var i=0; i<items.length; i++){
            item = items[i];
            sb.append('<div class="form-group">');
            sb.append('<div class="col-sm-2">'+CommUtil.toText(item.condDesc)+'</div>');
            sb.append('<div class="col-sm-4">下个活动: <span style="color: #'+getGroupColor(item.nextActId)+'">'+CommUtil.toText(item.actName)+'</span></div>');
            sb.append('<div class="col-sm-3">进入-检查实例: '+CommUtil.toText(item.inCheckInstance)+'</div>');
            sb.append('<div class="col-sm-3">退出-通知实例: '+CommUtil.toText(item.outNoticeInstance)+'</div>');
            sb.append('</div>');
        }
        return sb.toString();
    }

    var colors = ["66CC00", "669999", "9999FF", "FF9966", "666600", "009999"];
    var colorMap = new Map();
    var colorDex = 0;
    function getGroupColor(group){
        var color = null;
        if(colorMap.containsKey(group)){
            color =  colorMap.get(group);
        }else{
            color = colors[colorDex];
            colorMap.put(group, color);
            colorDex++;
        }
        return color;
    }
</script>
</html>